<template>
  <!-- 租户管理 -->
  <div class="module_par">
    <div class="module_con">
      <!-- 搜索区域 -->
      <div class="search_box">
        <el-row :gutter="20">
          <el-col :span="6">
            <span class="inpText">租户代码:</span>
            <el-input v-model="searchBox.code" autocomplete="off" size="small" class="searchInp"></el-input>
          </el-col>
          <el-col :span="6">
            <span class="inpText">租户名称:</span>
            <el-input v-model="searchBox.name" autocomplete="off" size="small" class="searchInp"></el-input>
          </el-col>
          <el-col :span="6">
            <span class="inpText">启用状态:</span>
            <el-select v-model="searchBox.sta" size="small">
              <el-option :label="ele.optionName" :value="ele.optionValue" v-for="(ele,index) in searchBox.optionSta"
                :key="index">{{ ele.optionName }}</el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" size="small" @click="goSearch" v-if="$requestBtnApi.tenant.queryBtn">查询</el-button>
            <el-button type="primary" size="small" @click="resetData">重置</el-button>
            <el-button type="primary" size="small" @click="addDataList" v-if="$requestBtnApi.tenant.addBtn">新增</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 主体内容 -->
      <div class="table-content">
        <el-table :data="tenantData" border tooltip-effect="dark" style="width: 100%">
          <el-table-column align="center" label="#" type="index"></el-table-column>
          <el-table-column prop="tenantCode" align="center" label="租户代码"></el-table-column>
          <el-table-column prop="tenantName" align="center" label="租户名称"></el-table-column>
          <el-table-column prop="tenantState" align="center" label="启用状态">
            <template slot-scope="scope">
              <el-tag size="mini" effect="plain" v-if="scope.row.tenantState == '1'">启用</el-tag>
              <el-tag size="mini" type="danger" effect="plain" v-if="scope.row.tenantState == '0'">禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="linkman" align="center" label="联系人"></el-table-column>
          <el-table-column prop="contactNumber" align="center" label="联系电话"></el-table-column>
          <el-table-column prop="address" align="center" label="联系地址"></el-table-column>
          <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column>
          <el-table-column prop="updateUser" align="center" label="修改人"></el-table-column>
          <el-table-column prop="updateTime" align="center" label="修改时间"></el-table-column>

          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <!-- <el-button
                type="primary"
                size="small"
                @click="editData(scope.row)"
              >编辑</el-button>-->
              <a class="table_a" @click="editData(scope.row)" v-if="$requestBtnApi.tenant.editBtn">
                <i class="el-icon-edit"></i>编 辑
              </a>
              <!-- <el-button
                type="primary"
                size="small"
                @click="seeData(scope.row)"
              >详情</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <div class="pageBox">
        <el-pagination v-show="total>0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 420]" :page-size="tableQuery.limit" layout="total, sizes, prev, pager, next, jumper"
          :total="total"></el-pagination></div>
      </div>
      <!-- 弹框区域 -->
      <!-- 新增 -->
      <el-dialog :title="diaTitle" :visible.sync="dialogAddSta">
        <el-form :model="addData" label-width="100px" :rules="roules" ref="ruleForm">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="租户代码" prop="code">
                <el-input v-model="addData.code" autocomplete="off" size="small" class="searchInp" :disabled="diaSta"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="租户名称" prop="name">
                <el-input v-model="addData.name" autocomplete="off" size="small" class="searchInp"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="启用状态" prop="sta">
                <el-select v-model="addData.sta" placeholder="请选择" size="small">
                  <el-option v-for="item in addData.optionSta" :key="item.optionValue" :label="item.optionName" :value="item.optionValue"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人">
                <el-input v-model="addData.linkman" autocomplete="off" size="small" class="searchInp"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="联系电话">
                <el-input v-model="addData.contactNumber" autocomplete="off" size="small" class="searchInp"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系地址">
                <el-input v-model="addData.address" autocomplete="off" size="small" class="searchInp"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddSta = false" size="small">取 消</el-button>
          <el-button type="primary" @click="addYes" size="small">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑 -->
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        searchSta: false,
        searchBox: {
          name: "",
          code: "",
          sta: "",
          optionSta: [{
              optionValue: "1",
              optionName: "启用",
            },
            {
              optionValue: "0",
              optionName: "禁用",
            },
          ],
        },
        tenantData: [],
        total: 0,
        tableQuery: {
          limit: 5,
          indexNo: 0,
        },
        dialogAddSta: false,
        addData: {
          name: "",
          code: "",
          sta: "",
          address: "",
          contactNumber: "",
          linkman: "",
          optionSta: [{
              optionValue: "1",
              optionName: "启用",
            },
            {
              optionValue: "0",
              optionName: "禁用",
            },
          ],
        },
        roules: {
          name: [{
            required: true,
            message: "请输入租户名称",
            trigger: "blur"
          }],
          code: [{
            required: true,
            message: "请输入租户代码",
            trigger: "blur"
          }],
          sta: [{
            required: true,
            message: "请选择启用状态",
            trigger: "blur"
          }],
        },
        diaTitle: "",
        diaSta: false,
        diaData: {},
      };
    },
    methods: {
      // 新增租户确定
      addYes() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            if (this.diaSta) {
              // 编辑
              this.diaData.tenantName = this.addData.name;
              this.diaData.tenantCode = this.addData.code;
              this.diaData.tenantState = this.addData.sta;
              this.diaData.address = this.addData.address;
              this.diaData.contactNumber = this.addData.contactNumber;
              this.diaData.linkman = this.addData.linkman;
              this.$requestA[this.$requestBtnApi.tenant.editType](
                this.$requestBtnApi.tenant.editUrl,
                this.diaData,
                (res) => {
                  if (res.code == "200") {
                    this.$message({
                      showClose: true,
                      message: "编辑成功",
                      type: "success",
                    });
                    this.getTenantList();
                  }
                }
              );
            } else {
              // 新增
              const data = {
                tenantCode: this.addData.code,
                tenantName: this.addData.name,
                tenantState: this.addData.sta,
                linkman: this.addData.linkman,
                contactNumber: this.addData.contactNumber,
                address: this.addData.address,
              };
              this.$requestA[this.$requestBtnApi.tenant.addType](
                this.$requestBtnApi.tenant.addUrl,
                data,
                (res) => {
                  if (res.code == "200") {
                    this.$message({
                      showClose: true,
                      message: "新增租户成功",
                      type: "success",
                    });
                    this.getTenantList();
                  }
                }
              );
            }
            this.dialogAddSta = false;
          } else {
            return false;
          }
        });
      },
      // 新增租户按钮
      addDataList() {
        this.dialogAddSta = true;
        this.$nextTick(() => {
          this.$refs.ruleForm.resetFields();
          this.diaTitle = "新增租户";
          this.addData.name = "";
          this.addData.code = "";
          this.addData.sta = "";
          this.addData.address = "";
          this.addData.contactNumber = "";
          this.addData.linkman = "";
          this.diaSta = false;
        });
      },
      // 编辑租户
      editData(val) {
        this.diaTitle = "编辑租户";
        this.diaSta = true;
        // this.addData.name = val.tenantName;
        // this.addData.code = val.tenantCode;
        // this.addData.sta = val.tenantState;
        this.dialogAddSta = true;
        this.$nextTick(() => {
          console.log("333333333");
          this.$refs.ruleForm.resetFields();
          this.addData.name = val.tenantName;
          this.addData.code = val.tenantCode;
          this.addData.sta = val.tenantState;
          this.addData.address = val.address;
          this.addData.contactNumber = val.contactNumber;
          this.addData.linkman = val.linkman;
          this.diaData = val;
        });
      },
      // 查看详情
      seeData(val) {},
      // 搜索按钮
      goSearch() {
        this.tableQuery.limit = 5;
        this.tableQuery.indexNo = 0;
        this.searchSta = true;
        this.getTenantList();
      },
      // 重置按钮
      resetData() {
        this.searchBox.name = "";
        this.searchBox.code = "";
        this.searchBox.sta = "";
        this.tableQuery.limit = 5;
        this.tableQuery.indexNo = 0;
        this.searchSta = false;
        this.getTenantList();
      },
      handleSizeChange(val) {
        this.tableQuery.limit = val;
        this.tableQuery.indexNo = 0;
        this.getTenantList();
      },
      handleCurrentChange(val) {
        this.tableQuery.indexNo = val - 0 - 1;
        this.getTenantList();
      },
      // 获取租户列表
      getTenantList() {
        const data = {
          tenantCode: this.searchSta ? this.searchBox.code : "",
          tenantName: this.searchSta ? this.searchBox.name : "",
          tenantState: this.searchSta ? this.searchBox.sta : "",
          size: this.tableQuery.limit,
          page: this.tableQuery.indexNo,
        };
        this.$requestA[this.$requestBtnApi.tenant.queryType](
          this.$requestBtnApi.tenant.queryUrl,
          data,
          (res) => {
            this.tenantData = res.data.content;
            this.total = res.data.totalElements;
          }
        );
      },
    },
    created() {
      this.$route.meta.menuList.map((item) => {
        if (item.eleName == "查询") {
          this.$requestBtnApi.tenant.queryUrl = item.eleUrl;
          this.$requestBtnApi.tenant.queryType =
            item.operType == "delete" ? "dele" : item.operType;
          this.$requestBtnApi.tenant.queryBtn = true;
        } else if (item.eleName == "新增") {
          this.$requestBtnApi.tenant.addUrl = item.eleUrl;
          this.$requestBtnApi.tenant.addType =
            item.operType == "delete" ? "dele" : item.operType;
          this.$requestBtnApi.tenant.addBtn = true;
        } else if (item.eleName == "编辑") {
          this.$requestBtnApi.tenant.editUrl = item.eleUrl;
          this.$requestBtnApi.tenant.editType =
            item.operType == "delete" ? "dele" : item.operType;
          this.$requestBtnApi.tenant.editBtn = true;
        }
      });
      this.getTenantList();
    },
    mounted() {},
  };
</script>

<style scoped>
  @import "../../assets/css/base.css";

  .search_box {
    background: #fff;
    border-radius: 5px;
    padding: 40px 40px 60px 40px;
    margin: 0 0 20px 0;
  }

  .box_center {
    text-align: left;
  }

  .searchBtn {
    margin-left: 80px;
  }
  .pageBox {
    display: flex;
    width: 100%;
    justify-content: left;
    margin-top: 10px;
  }
</style>
